<template>
	<view class="dynamic">
		<view class="header">
			<view class="left">
				<scroll-view  class="scroll" scroll-x="true" enable-flex>
					<view @click="isCheck=index" :class="{'active':index===isCheck}" class="scrollItem" v-for="(item,index) in tabList" :key="index">{{item}}</view>
				</scroll-view>
			</view>
			<view class="right">
				<image src="../../static/tabBar/搜索，猫客.png" mode=""></image>
				<image class="msgImg" src="../../static/tabBar/211铃铛-线性.png"></image>
				<image v-if="avatarUrl" class="avatar" :src="avatarUrl" @click="toCenter"></image>
				<image v-else class="avatar" src="../../static/tabBar/avatar.png" @click="toLogin"></image>
			</view>
		</view>
		
		<scroll-view  class="main" scroll-y="true" enable-flex >
			<view class="scrollItem" v-for="(video,index) in videoList" :key="index">
				<view class="main-header">
					<image class="avatar" :src="video.userInfo.avatarUrl"></image>
					<view class="userInfo">
						<Text class="userName">{{video.userInfo.userName}}</Text>
						<text class="info">{{video.title}}</text>
					</view>
					<image class="headerBot" src="../../static/more.png" mode=""></image>
				</view>
				<view class="videoList">
					<!-- @timeupdate="handlerTimeUpdate" -->
					<video :id="`${index}0625`" :ref="`${index}0625`" @play="paly(index,$event)" :src="video.userInfo.url" controls></video>
				</view>
				<view class="contents">{{video.contents}}</view>
				<view class="main-bottom">
					<view class="num">
						<image src="../../static/ico-m24-w24-repost.png"></image>
					</view>
					<view class="num">
						<image src="../../static/ico-m24-w24-reply.png" mode=""></image>
						<text>{{video.praisedCount}}</text>
					</view>
					<view class="num">
						<image src="../../static/ico-m24-w24-praise.png" mode=""></image>
						<text>{{video.commentCount}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
			
		
		
		<!-- <view class="videoList" v-for="(video,index) in videoList" :key="index">
			<video :src="video.userInfo.url" controls></video>
		</view> -->
		
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				isCheck:2,
				videoList:[],
				tabList:["关注","推荐","视频","论坛"],
				vid:""
			};
		},
		mounted(){
			this.getVideoList()
		},
		methods:{
			async getVideoList(){
			const result = await request('/getVideoList')
			result.forEach(item=>{
				this.videoList.push(item)
			})
			},
			toLogin(){
				wx.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 转跳到个人中心页面
			toCenter(){
				uni.navigateTo({
					url:'/pages/center/center'
				})
			},
			// 播放视频 
			paly(index,e){
				if (!this.player) {
					// 创建上下文对象
					this.player = uni.createVideoContext(`${index}0625`,this)
					// console.log(this.player);
					// 保存视频下标
					this.vid=index
					// 播放
					this.player.play()
				}else if(this.vid===index){
					// 播放的是上一次的视频
					this.player.play()
				}else{
					// 不是第一次点击 也不是上一个视频
					// 暂停上一个视频
					this.player.pause()
					//创建新的视频上下文，覆盖上一次 保证只有一个视频上下文
					this.player = uni.createVideoContext(`${index}0625`,this)
					// 保存视频下标
					this.vid=index
				}
				// console.log(e)
			},
			// 保存播放进度
			// handlerTimeUpdate(e){
			// 	// 判断是否存在当前记录
			// 	let obj = this.videoList[this.vid].video
			// 	if(obj){
			// 		// 修改当前记录
			// 		obj.currentTime = e.detail.currentTime
			// 	}else{
			// 		// 创建一个视频播放记录
			// 		let obj={
			// 			vid:this.vid,
			// 			currentTime:e.detail.currentTime
			// 		}
			// 		this.$set(this.videoList[this.vid],'video',obj)
			// 	}
			// }
		},
		computed:{
			avatarUrl(){
				return uni.getStorageSync('userInfo_key').avatarUrl
			}
		}
	}
</script>

<style lang="stylus">
.dynamic
	.header
		display flex
		height 135rpx
		align-items center
		justify-content space-between
		padding 0 32rpx
		border-bottom 12rpx solid #F5F7F8
		image
			width 50rpx
			height 50rpx
			border-radius 50%
			margin-left 24rpx
		.right
			padding 24rpx 0
		.left
			.scroll
				display flex
				height 106rpx
				width calc(100vw - 286rpx)
				white-space nowrap
				.scrollItem
					position relative
					font-size 36rpx
					margin 0 32rpx
					line-height 106rpx
					&.active
						font 700 44rpx ""
						line-height 108rpx
						&::after
							content ""
							position absolute
							background-color #15c5cc
							border-radius 6rpx
							bottom 6rpx
							left: 50%;
							transform: translateX(-50%);
							width 50rpx
							height 6rpx
	.main
		width 100%
		height calc(100vh - 150rpx)
		.scrollItem
			border-bottom 12rpx solid #F5F7F8	
			padding 32rpx 32rpx 16rpx 32rpx
			.main-header
				height 80rpx
				padding-bottom 16rpx
				display flex
				flex-direction row
				width 100%
				align-items center
				.avatar
					width 60rpx
					height 60rpx
					border-radius 50%
				.userInfo
					display flex
					flex-direction column
					align-content space-around
					flex-grow 2
					margin-left 24rpx
					justify-content center
					.userName
						font 700 32rpx ""
					.info
						font-size 24rpx
						color #14b9c8
				.headerBot
					width 34rpx
					height 34rpx
			.videoList
				width 100%
				height 100%
				background-color #000000
				border-radius 12rpx
				overflow hidden
				margin-bottom 16rpx
				video
					width 100%
			.contents
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				overflow:hidden;
				line-height 44rpx
				font-size 32rpx
				color #333
			.main-bottom
				display flex
				justify-content space-around
				image
					width 56rpx
					height 56rpx
					margin-right 8rpx
				.num
					display flex
					align-items center
					font-size 28rpx
					line-height 56rpx
					margin-left 8rpx
					color #868C92
					
					
		
				
			

</style>
